import { TableColumnsProps } from '@/pages/Template/components/TableColumns/type';
import { ProFormText } from '@ant-design/pro-components';
import { ProForm } from '@ant-design/pro-form';
import { Button, Form, Segmented } from 'antd';
import { SegmentedValue } from 'rc-segmented';
import { useEffect, useMemo, useRef, useState } from 'react';

export const TableColumns = (props: TableColumnsProps) => {
  const { label } = props;
  const [form] = Form.useForm();
  const formRef = useRef(null);
  const [title, setTitle] = useState<string | number | undefined>(label);

  const updateFormFields = useMemo(() => {
    return () => {
      form.setFieldsValue({ title: label });
    };
  }, [form, label]);

  useEffect(() => {
    if (label && updateFormFields) {
      setTitle(label);
      updateFormFields();
    }
  }, [label, updateFormFields]);

  return (
    <ProForm
      form={form}
      formRef={formRef}
      onFinish={async (values) => {
        console.log(values);
      }}
      submitter={{
        render: () => <Button type={'primary'}>保存</Button>,
      }}
    >
      <ProFormText
        label="title"
        name="title"
        initialValue={title}
        fieldProps={{ disabled: true }}
      />
      <ProFormText label="dataIndex" name="dataIndex" />
      <Form.Item label="search" name="search" initialValue={'true'}>
        <Segmented
          onChange={(value: SegmentedValue) => {
            form.setFieldsValue({ search: value });
          }}
          options={[
            { value: 'true', label: 'true' },
            { value: 'false', label: 'false' },
          ]}
        />
      </Form.Item>

      <Form.Item label="valueType" name="valueType" initialValue={'text'}>
        <Segmented
          onChange={(value: SegmentedValue) => {
            form.setFieldsValue({ search: value });
          }}
          options={[
            { value: 'text', label: 'text' },
            { value: 'select', label: 'select' },
            { value: 'date', label: 'date' },
          ]}
        />
      </Form.Item>
      <Form.Item label="hideInSearch" name="hideInSearch" initialValue={false}>
        <Segmented
          onChange={(value: SegmentedValue) => {
            form.setFieldsValue({ hideInSearch: value });
          }}
          options={[
            { value: 'true', label: 'true' },
            { value: 'false', label: 'false' },
          ]}
        />
      </Form.Item>
      <Form.Item label="hideInTable" name="hideInTable" initialValue={false}>
        <Segmented
          onChange={(value: SegmentedValue) => {
            form.setFieldsValue({ hideInTable: value });
          }}
          options={[
            { value: 'true', label: 'true' },
            { value: 'false', label: 'false' },
          ]}
        />
      </Form.Item>
    </ProForm>
  );
};
